<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycavas" width="500px" height="400px" style="border: 1px solid #ccc"></canvas>

	<canvas id="mycavas2" width="500px" height="300px" style="border: 1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	context.beginPath();
	context.strokeStyle="ff0000";
	context.fillStyle="rgb(0,255,0)";
	context.rect(20,20,200,100);
	context.stroke();
	context.fill();

	context.fillStyle="#0000ff";
	context.fillRect(20,160,200,100);

</script>

<script type="text/javascript">
	var canvas2 = document.getElementById("mycanvas2");
	var context2 = canvas2.getContext("2d");
	context2.beginPath();
	context2.arc(95,50,40,Math.PI,Math.PI*2);
	context2.stroke();

	context2.closePath();
	context2.fillStyle="rgb(255,0,0)";
	context2.arc(95,150,40,0,Math.PI*2,true);
	context2.fill()

</script>